<template>
<div class="compare_list">
    <div class="mui-card">
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">大家电</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>
                </ul>
            </li>
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">手机数码</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">电脑办公</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">生活家电</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">厨卫家电</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
        
        <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">个人护理</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">正品鞋</a>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li v-for="item in  product_list" :key="item.id" class="menu_main">{{ item.name }}</li>							
                </ul>
            </li>
            </ul>
			</div>
    <loginstate></loginstate>
</div>
<!-- </div> -->
</template>
<style lang="less">
.compare_list{
    margin-top: 50px;
    height: 100%;
    width: 100%;
    background-color: #ddd;
    .menu_main{
        width: 32%;
        line-height: 35px;
        font-size: 12px;
        float: left;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 1%;
    }
}
</style>
<script>
import loginstate from "./logintai/loginstate.vue";
// import mui from "./lib/mui/js/mui.min.js";
export default {
    data() {
        return {
           class_cc:"mui-table-view-cell mui-collapse",
           class_dd:"mui-table-view-cell mui-collapse mui-active",
           flag :true,
           product_list:[
               {"name":"平板电视","id":1},
               {"name":"空调","id":2},
               {"name":"家庭影院","id":3},
               {"name":"冰箱","id":4},
               {"name":"DVD高清播放器","id":5},
               {"name":"音响/音箱","id":6},
               {"name":"洗衣机","id":7},
               {"name":"热水器","id":8},
               {"name":"酒柜冰吧冷柜","id":9},
               {"name":"消毒柜","id":10}
           ]
        }
    },
    methods:{
        // convert(e){
        //   if(this.flag){
        //       this.flag = !this.flag;
        //       e.path[1].className = this.class_dd;
        //   }else{
        //       this.flag = !this.flag;
        //     e.path[1].className = this.class_cc;
        //   }
        // }
        // mui('#sheet1').popover('toggle');
    },
    components:{
        "loginstate":loginstate
    }
}
</script>
